<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="static/css/mdui.min.css" crossorigin="anonymous" />
    <script src="static/js/mdui.min.js" crossorigin="anonymous"></script>
    <script src="static/js/http.js" crossorigin="anonymous"></script>
    <title>注册</title>
</head>

<html>

<body class="mdui-theme-primary-indigo mdui-theme-layout-auto mdui-theme-accent-indigo">
    <div class="mdui-card">
        <div class="mdui-progress mdui-hidden" id="mdui_loading">
            <div class="mdui-progress-indeterminate"></div>
        </div>

        <div class="mdui-card-primary mdui-color-theme">
            <div class="mdui-card-primary-title">
                <div style="text-align: center;">HR系统注册</div>
            </div>
        </div>
        <form name="regForm" method="POST" action="register">
            <div class="mdui-card-content mdui-p-t-1 mdui-card-primary">

                <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                    <i class="mdui-icon material-icons">account_circle</i>
                    <div class="mdui-textfield-label">用户名</div>
                    <input class="mdui-textfield-input" name="username" type="username" id="reg_username" required />
                    <div class="mdui-textfield-error">请输入用户名</div>
                </div>

                <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                    <i class="mdui-icon material-icons">vpn_key</i>
                    <div class="mdui-textfield-label">密码</div>
                    <input class="mdui-textfield-input" name="passwd" type="password" id="reg_password" required />
                    <div class="mdui-textfield-error">请输入密码</div>
                </div>

                <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                    <i class="mdui-icon material-icons" style="top: 21px;">accessibility</i>
                    <div class="mdui-textfield-label" style="color: gray;">性别</div>
                    <div class="mdui-container" style="margin-left: 7.5rem;">
                        <div class="mdui-row-md-4" style="margin-top: -2px;">
                            <div class="mdui-col">
                                <label class="mdui-radio">
                                    <input type="radio" name="sex" value="male" / checked>
                                    <i class="mdui-radio-icon"></i>
                                    男
                                </label>
                            </div>
                            <div class="mdui-col">
                                <label class="mdui-radio">
                                    <input type="radio" name="sex" value="female" />
                                    <i class="mdui-radio-icon"></i>
                                    女
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0" style="overflow:visible;">
                    <i class="mdui-icon material-icons" style="top: 21px;">account_balance</i>
                    <div class="mdui-textfield-label" style="color: gray;">学院</div>
                    <select class="mdui-select" name="college" mdui-select style="margin-left: 8rem;">
                        <option value="sw">软件学院</option>
                        <option value="cs">计算机学院</option>
                    </select>
                </div>
            </div>
            <div class="mdui-card-actions mdui-card-actions-stacked mdui-p-t-1">
                <button type="button" onclick="register()"
                    class="mdui-btn mdui-btn-block mdui-ripple mdui-color-theme ">注册</button>
                <button onclick="window.location.href = 'login.html'"
                    class="mdui-btn mdui-ripple mdui-btn-block mdui-color-cyan-100">返回</button>
            </div>
        </form>




</body>

</html>

<script>

    var isFail = getQueryVariable('fail')
    // console.log(isFail)
    if (isFail == 'true') {
        // console.log('do it')
        mdui.snackbar({
            message: '注册失败，用户名重复',
            position: 'top',
            timeout: '3000',
            buttonColor: 'red'
        });
        // 把url参数在不刷新的状态下拿掉
        var url = location.pathname
        history.pushState({ url: url, title: document.title }, document.title, url)
    }

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return (false);
    }

    function register() {

        var username = document.getElementById('reg_username')
        var passwd = document.getElementById('reg_password')

        console.log(username.validity.valueMissing)
        console.log(passwd.validity.valueMissing)
        // console.log(document.forms["loginForm"])

        if (username.validity.valueMissing == true) {
            username.setCustomValidity("请输入用户名")
            username.reportValidity()
            return
        }

        if (passwd.validity.valueMissing == true) {
            passwd.setCustomValidity("请输入密码")
            passwd.reportValidity()
            return
        }

        document.getElementById('mdui_loading').className = 'mdui-progress'
        document.forms["regForm"].submit()

        // document.getElementById('mdui_loading').className = 'mdui-progress'
        // //普通get请求
        // http.get('/', function (err, result) {
        //     // 这里对结果进行处理
        //     console.log(result)
        //     document.getElementById('mdui_loading').className = 'mdui-progress mdui-hidden'
        // });
    }
</script>
<style>
    .mdui-card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 88%;
        max-width: 340px;
        max-height: 90%;
        transform: translate(-50%, -50%);
        overflow: auto;
    }

    .mdui-card .mdui-progress {
        position: relative;
        top: 0;
        z-index: 1;
    }

    .mdui-card .mdui-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    /* .mdui-textfield .mdui-textfield-floating-label{
        margin: 1rem;
    } */
</style>